<template>
  <el-dialog
  title="题目预览"
  :visible="dialogVisible"
  width="60%"
  @close="close"
  >
 <div class="top">
<el-row :gutter="14">
  <el-col :span="6">【题型】:{{list.questionType==1?'单选':'简答' }}<div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6">【编号】:{{list.id}}<div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6">【难度】: {{list.difficulty=='1'?'简单':(list.difficulty=='2'?'一般':'困难')}}<div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6">【标签】:{{list.tags}}<div class="grid-content bg-purple"></div></el-col>
</el-row>
<br>
<el-row :gutter="20">
  <el-col :span="6">【学科】:{{list.subjectID}}<div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6">【目录】:{{list.directoryName}}<div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6">【方向】:{{list.direction}}<div class="grid-content bg-purple"></div></el-col>
</el-row>
<div style="width:100%;height:1px;backgroundColor:#ccc;margin-top:15px;"></div>
<div>【题干】:</div>
<br>
<div style="color:blue" v-html="list.question"></div>
<div>单选题 选项：（以下选中的选项为正确答案）</div>
<div v-for="item in list.options" :key="item.id">
   <el-radio disabled  v-model="item.isRight" :label=1>{{item.title}}</el-radio>
</div>
<div style="width:100%;height:1px;backgroundColor:#ccc;margin-top:15px;margin-bottom: 15px;"></div>
<div>【参考答案】:  <el-button size="small" type="danger">视频答案预览</el-button></div>
<div style="width:100%;height:1px;backgroundColor:#ccc;margin-top:15px;margin-bottom: 15px;"></div>
<div>【答案解析】:{{list.remarks}}</div>
<div style="width:100%;height:1px;backgroundColor:#ccc;margin-top:15px;margin-bottom: 15px;"></div>
<div style="margin-bottom: 45px;">【题目备注】:{{list.remarks}}</div>
<el-button style="margin-left:800px;" type="primary" @click="dialogVisible = false">取 消</el-button>
 </div>

</el-dialog>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  created () {

  },

  data () {
    return {
      list: [],
      dialogVisible: false,
      data: {

      }
    }
  },
  props: {
    id: {
      required: true,
      type: [Number, String]
    }
  },
  methods: {
    close () {
      this.dialogVisible = false
    },
    async openDialog () {
      this.dialogVisible = true
      this.data.id = this.id
      // console.log(this.data)
      const res = await detail(this.data)
      console.log(res)
      this.list = res.data
    }
  }
}
</script>

<style scoped lang='less'></style>
